<!--
 * @Author: your name
 * @Date: 2021-07-12 15:48:16
 * @LastEditTime: 2022-01-27 10:46:00
 * @LastEditors: Please set LastEditors
 * @Description: Common feed form
 * @FilePath: \jinfeng_up\src\components\Feedback\Feedback.vue
-->
<template>
    <div class="createFeedBack">
         <el-page-header class="header" @back="toFeedBack" content="">
            <template slot="title">
                反馈总览 - 编辑反馈
            </template>
            <template slot="content">
                <el-button class="option_btn" @click="sendCancel"
                    >取消</el-button
                >
                <el-button class="option_btn" @click="getMsgFormSon" v-if="draftForm.feedBackNumber === null || draftForm.feedBackNumber === 0"
                    >存草稿</el-button
                >
                <el-button
                    class="option_btn"
                    @click="getMsgFormSonS('draftForm')"
                    >发布</el-button
                >
            </template>
        </el-page-header>
        <div class="create_container">
            <el-form
                class="createFeedBackForm"
                :model="draftForm"
                ref="draftForm"
                label-position="left"
                label-width="140px"
            >
                <el-row>
                    <el-col :span="8">
                        <el-form-item
                            label="产品名称"
                            class="ProductionName"
                            prop="productId"
                            :rules="{
                                required: true,
                                message: '请选择产品名称',
                                trigger: 'change',
                            }"
                        >
                            <el-select
                                class="userSelect"
                                v-model="draftForm.productId"
                                placeholder="请选择产品名称"
                                clearable
                                filterable
                                @change="productionChange"

                            >
                             <!-- :disabled="isProducr" -->
                                <el-option
                                    v-for="(item, index) in ProductList"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item
                            label="营销项目名称"
                            class="Marketing"
                            prop="marketProjectSecond"
                            :rules="{
                                required: true,
                                message: '请选择营销项目名称',
                                trigger: 'change',
                            }"
                        >
                            <el-select
                                class="userSelect"
                                v-model="draftForm.marketProjectSecond"
                                clearable
                                filterable
                                placeholder="请选择营销项目名称"
                            >
                                <el-option
                                    v-for="(
                                        item, index
                                    ) in MarketingProjectName"
                                    :key="index"
                                    :label="item.title"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item
                            label="版本号"
                            prop="versionNumber"
                            id="lengthLimit"
                            :rules="{
                                required: true,
                                message: '请输入版本号',
                                trigger: 'blur',
                                min: 1,
                                max: 100,
                                message: '请输入版本号,长度在 0 到 100 个字符',
                                trigger: 'blur',
                            }"
                        >
                            <el-input
                                class="userInput"
                                v-model="draftForm.versionNumber"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item
                            label="营销项目状态"
                            prop="marketProjectFirst"
                            :rules="{
                                required: true,
                                message: '请选择营销项目状态',
                                trigger: 'change',
                            }"
                        >
                            <el-select
                                class="userSelect"
                                v-model="draftForm.marketProjectFirst"
                                clearable
                                filterable
                                placeholder="请选择营销项目状态"
                            >
                                <el-option
                                    v-for="(item, index) in problemTypeList"
                                    :key="index"
                                    :label="item.title"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item
                            label="反馈来源"
                            class="DesignatedPerson"
                            prop="feedBackSource"
                            :rules="{
                                required: true,
                                message: '请选择反馈来源',
                                trigger: 'change',
                            }"
                        >
                            <el-select
                                class="userSelect"
                                v-model="draftForm.feedBackSource"
                                clearable
                                filterable
                                placeholder="请选择反馈来源"
                            >
                                <el-option
                                    v-for="(item, index) in feedBackSourceList"
                                    :key="index"
                                    :label="item.title"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item
                            label="指派给"
                            class="DesignatedPerson"
                            prop="userId"
                            :rules="{
                                required: true,
                                message: '请选择指派人',
                                trigger: 'change',
                            }"
                        >
                            <el-select
                                class="userSelect"
                                v-model="draftForm.userId"
                                clearable
                                filterable
                                placeholder="请选择指派人"
                            >
                                <el-option
                                    v-for="(item, index) in UserList"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item
                            label="流程节点"
                            class="ProductionName"
                            prop="stage"
                            :rules="{
                                required: true,
                                message: '请选择处理阶段',
                                trigger: 'change',
                            }"
                        >
                            <el-select
                                class="userSelect"
                                v-model="draftForm.stage"
                                placeholder="请选择处理阶段"
                                clearable
                                filterable
                                disabled
                            >
                                <el-option
                                    v-for="(item, index) in childStageList"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="创建人">
                            <el-input
                                disabled
                                class="userInput"
                                v-model="draftForm.creatorString"
                            ></el-input>
                            <!-- <el-select v-model="draftForm.creator" clearable filterable class="userSelect" disabled>
                <el-option v-for="item in creatUserList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="创建人部门">
                            <el-input
                                disabled
                                class="userInput"
                                v-model="draftForm.creatorDepartment"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 以下都是可动态增加的表单项 -->
                <div class="feedBackitem">
                    <!-- 栏目提示 -->
                    <div class="columnTips">
                        <span class="blue_square"></span>
                        <span class="column_title">反馈详情描述</span>
                    </div>

                    <el-row>
                        <el-form-item
                            class="Marketing"
                            label="标题"
                            prop="title"
                            :rules="{
                                required: true,
                                message: '标题不能为空',
                                trigger: 'blur',
                            }"
                        >
                            <el-input
                                v-model="draftForm.title"
                                class="userInputTitle"
                            ></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item
                                label="一级问题类型"
                                class="DesignatedPerson"
                            >
                                <el-select
                                    class="userSelect"
                                    @change="changeBigCatlog($event)"
                                    v-model="draftForm.problemTypeParent"
                                    placeholder="请选择一级问题类型"
                                    clearable
                                    filterable
                                >
                                    <el-option
                                        v-for="(
                                            item, index
                                        ) in marketProjectFirstList"
                                        :key="index"
                                        :label="item.name"
                                        :value="item.id"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="二级问题类型"
                                class="DesignatedPerson"
                            >
                                <el-select
                                    class="userSelect"
                                    v-model="draftForm.problemType"
                                    clearable
                                    filterable
                                    placeholder="请选择二级问题类型"
                                >
                                    <el-option
                                        v-for="(
                                            item, index
                                        ) in marketProjectSecondList"
                                        :key="index"
                                        :label="item.name"
                                        :value="item.id"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <el-form-item
                                label="问题描述"
                                class="questionDesc"
                                prop="problemDescribe"
                                :rules="{
                                    required: true,
                                    message: '请输入问题描述',
                                    trigger: 'blur',
                                }"
                            >
                                <div class="isShowError">
                                    <el-upload
                                        class="avatar-uploader quill-img"
                                        :action="fileUpload"
                                        :on-change="imgSaveToUrl"
                                        :headers="importHeaders"
                                        :show-file-list="false"
                                        :on-success="quillImgSuccess"
                                        :on-error="uploadError"
                                        :before-upload="quillImgBefore"
                                        accept=".jpg,.jpeg,.png,.gif"
                                    ></el-upload>
                                    <quill-editor
                                        class="editor ql-edito"
                                        v-model="draftForm.problemDescribe"
                                        :options="editorOption"
                                        ref="quillEditor"
                                    >
                                    </quill-editor>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item
                                label="初步排查结果"
                                class="questionDesc"
                                prop="excludeResult"
                                :rules="{
                                    required: true,
                                    message: '请输入初步排查结果',
                                    trigger: 'blur',
                                }"
                            >
                                <div class="isShowError">
                                    <el-upload
                                        class="avatar-uploader quill-img1"
                                        :action="fileUpload"
                                        :on-change="imgSaveToUrl2"
                                        :headers="importHeaders"
                                        :show-file-list="false"
                                        :on-success="quillImgSuccess2"
                                        :on-error="uploadError2"
                                        :before-upload="quillImgBefore2"
                                        accept=".jpg,.jpeg,.png,.gif"
                                    ></el-upload>
                                    <quill-editor
                                        class="editor"
                                        v-model="draftForm.excludeResult"
                                        :options="editorOption2"
                                        ref="quillEditor2"
                                    >
                                    </quill-editor>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item
                                label="是否服务请求"
                                :rules="{
                                    required: true,
                                    message: '请选择是否服务请求',
                                    trigger: 'change',
                                }"
                            >
                                <el-select
                                    class="userSelect"
                                    v-model="draftForm.serverRequestTag"
                                    clearable
                                    filterable
                                    @change="changRequest"
                                    placeholder="请选择是否服务请求"
                                >
                                    <el-option
                                        label="是"
                                        :value="true"
                                    ></el-option>
                                    <el-option
                                        label="否"
                                        :value="false"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                v-if="draftForm.serverRequestTag"
                                label="服务请求编号"
                                prop="serverRequestNumber"
                                class="Marketing"
                                :rules="{
                                    required: true,
                                    message: '请选择请求编号',
                                    trigger: 'change',
                                }"
                            >
                                <el-input
                                    class="userInput"
                                    v-model="draftForm.serverRequestNumber"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <!--  :picker-options="pickerOptions" -->
                            <el-form-item
                                label="服务请求创建时间"
                                v-if="draftForm.serverRequestTag"
                                prop="serverRequestTime"
                                :rules="[
                                    {
                                        required: true,
                                        message: '请选择服务请求时间',
                                        trigger: 'blur',
                                    },
                                ]"
                            >
                                <el-date-picker
                                    class="userSelect"
                                    :picker-options="pickerOptions0"
                                    v-model="draftForm.serverRequestTime"
                                    type="date"
                                    placeholder="请选择创建时间"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item
                                label="影响类别 "
                                class="VersionNum"
                                prop="influenceCategory"
                                :rules="{
                                    required: true,
                                    message: '请选择影响类别',
                                    trigger: 'change',
                                }"
                            >
                                <el-select
                                    class="userSelect"
                                    v-model="draftForm.influenceCategory"
                                    clearable
                                    filterable
                                    placeholder="请选择影响类别"
                                    @change="influenceCategoryChange($event)"
                                >
                                    <el-option
                                        v-for="(
                                            item, index
                                        ) in influenceCategory"
                                        :key="index"
                                        :label="item.title"
                                        :value="item.id"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="16">
                            <el-form-item
                                label="期望完成时间"
                                class="DesignatedPerson serviceRequestNum"
                            >
                                <el-date-picker
                                    class="userSelect"
                                    v-model="draftForm.expirationDate"
                                    :picker-options="pickerOptions"
                                    type="date"
                                    placeholder="请选择期望完成时间"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <el-form-item
                                label="影响描述"
                                class="questionDesc"
                                prop="influenceDescribe"
                                :rules="{
                                    required: true,
                                    message: '请输入影响描述',
                                    trigger: 'change',
                                }"
                                ref="influenceDescribes"
                                v-if="draftForm.isRequiredTag"
                            >
                            <div class="isShowError">
                                <el-upload
                                    class="avatar-uploader quill-img2"
                                    :action="fileUpload"
                                    :on-change="imgSaveToUrl3"
                                    :headers="importHeaders"
                                    :show-file-list="false"
                                    :on-success="quillImgSuccess3"
                                    :on-error="uploadError3"
                                    :before-upload="quillImgBefore3"
                                    accept=".jpg,.jpeg,.png,.gif"
                                ></el-upload>
                                <quill-editor
                                    class="editor"
                                    v-model="draftForm.influenceDescribe"
                                    :options="editorOption3"
                                    ref="quillEditor3"
                                >
                                </quill-editor>
                                </div>
                            </el-form-item>
                            <el-form-item
                                label="影响描述"
                                class="questionDesc"
                                prop="influenceDescribe"
                                ref="influenceDescribes"
                                v-if="!draftForm.isRequiredTag"
                            >
                            <div class="isShowError">
                                <el-upload
                                    class="avatar-uploader quill-img2"
                                    :action="fileUpload"
                                    :on-change="imgSaveToUrl3"
                                    :headers="importHeaders"
                                    :show-file-list="false"
                                    :on-success="quillImgSuccess3"
                                    :on-error="uploadError3"
                                    :before-upload="quillImgBefore3"
                                    accept=".jpg,.jpeg,.png,.gif"
                                ></el-upload>
                                <quill-editor
                                    class="editor"
                                    v-model="draftForm.influenceDescribe"
                                    :options="editorOption3"
                                    ref="quillEditor3"
                                >
                                </quill-editor>
                                   </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item label="添加附件" class="uploadFiles">
                                <br />
                                <el-upload
                                    class="upload-demo"
                                    :action="fileUpload"
                                    :on-success="onFileSuccess"
                                    :on-error="onFileError"
                                    :on-remove="onFileRemove"
                                    :on-preview="handlePreview"
                                    :data="{
                                        checkOfficeFmt: false,
                                        isTmp: false,
                                        fileType: 'feedback',
                                    }"
                                    multiple
                                    :limit="3"
                                    :file-list="encLosureList"
                                >
                                    <el-button
                                        size="small"
                                        type="primary"
                                        style="margin-top: 6px"
                                        >点击上传</el-button
                                    >
                                </el-upload>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import Api from '@/api/feedBack/api'
import { quillEditor, Quill } from 'vue-quill-editor'
import { ImageExtend, QuillWatch } from 'quill-image-extend-module'
import axios from 'axios'
Quill.register('modules/ImageExtend', ImageExtend)

// 工具栏配置
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
    ['blockquote', 'code-block'], // 引用  代码块
    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
    [{ indent: '-1' }, { indent: '+1' }], // 缩进
    [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
    [{ align: [] }], // 对齐方式
    ['clean'], // 清除文本格式
    ['image'] // 图片、视频
]
import { FeedBack } from '@/api/feedBack/server'
import { FormOptionSet } from '@/api/setting/service.js'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// import socialUpload from '@/components/socialUpload/socialUpload.vue'
// import tinymceeditor from '@/components/tinymceEditer/tinymceEditer.vue'
export default {
    name: 'editFeedBack',
    components: {
        quillEditor
        // socialUpload
    },
    props: {},
    data() {
        var mytoken = JSON.parse(sessionStorage.getItem('USERINFO')).token // 要保证取到
        return {
            pickerOptions: {
                disabledDate(time) {
                    const _now = Date.now()
                    const seven = 1 * 24 * 60 * 60 * 1000
                    const sevenDays = _now - seven
                    return time.getTime() < sevenDays
                }
            },
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() > Date.now()
                }
            },
            editorOption: {
                modules: {
                    clipboard: {
                        // 粘贴版，处理粘贴时候带图片
                        matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]]
                    },
                    ImageExtend: { // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入
                        name: 'file', // 图片参数名
                        // size: 3, // 可选参数 图片大小，单位为M，1M = 1024kb
                        action: `${process.env.VUE_APP_GOLDWIND_BASE_API}` + '/v2/zentao/file/upload', // 服务器地址, 如果action为空，则采用base64插入图片
                        // response 为一个函数用来获取服务器返回的具体图片地址
                        // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
                        // 则 return res.data.url
                        response: (res) => {
                            return res.data.imgUrl
                        },
                        headers: (xhr) => {
                            xhr.setRequestHeader('token', JSON.parse(sessionStorage.getItem('USERINFO')).token)
                        } // 可选参数 设置请求头部
                    },
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            'image': function() { // 劫持原来的图片点击按钮事件
                                QuillWatch.emit(this.quill.id)
                            }
                        }
                    }
                },
                placeholder:
                    '1、写清楚程序版本 2、问题描述（区分 是新部署出现问题，还是升级出现问题，还是现场进行了其它什么相关操作，还是之前一直好好的突然出现的 这几种场景）'
            },
            editorOption2: {
                modules: {
                    clipboard: {
                        // 粘贴版，处理粘贴时候带图片
                        matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher2]]
                    },
                    ImageExtend: { // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入
                        name: 'file', // 图片参数名
                        // size: 3, // 可选参数 图片大小，单位为M，1M = 1024kb
                        action: `${process.env.VUE_APP_GOLDWIND_BASE_API}` + '/v2/zentao/file/upload', // 服务器地址, 如果action为空，则采用base64插入图片
                        // response 为一个函数用来获取服务器返回的具体图片地址
                        // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
                        // 则 return res.data.url
                        response: (res) => {
                            return res.data.imgUrl
                        },
                        headers: (xhr) => {
                            xhr.setRequestHeader('token', JSON.parse(sessionStorage.getItem('USERINFO')).token)
                        } // 可选参数 设置请求头部
                    },
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            'image': function() { // 劫持原来的图片点击按钮事件
                                QuillWatch.emit(this.quill.id)
                            }
                        }
                    }
                },
                placeholder:
                    '1、现场定位（现场进行了哪些排查操作，各个排查手段的输出结果是什么）2、日志（问题时刻异常日志截图+完成日志）'
            },
            editorOption3: {
                modules: {
                    clipboard: {
                        // 粘贴版，处理粘贴时候带图片
                        matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher3]]
                    },
                    ImageExtend: { // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入
                        name: 'file', // 图片参数名
                        // size: 3, // 可选参数 图片大小，单位为M，1M = 1024kb
                        action: `${process.env.VUE_APP_GOLDWIND_BASE_API}` + '/v2/zentao/file/upload', // 服务器地址, 如果action为空，则采用base64插入图片
                        // response 为一个函数用来获取服务器返回的具体图片地址
                        // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
                        // 则 return res.data.url
                        response: (res) => {
                            return res.data.imgUrl
                        },
                        headers: (xhr) => {
                            xhr.setRequestHeader('token', JSON.parse(sessionStorage.getItem('USERINFO')).token)
                        } // 可选参数 设置请求头部
                    },
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            'image': function() { // 劫持原来的图片点击按钮事件
                                QuillWatch.emit(this.quill.id)
                            }
                        }
                    }
                },
                placeholder: '请输入影响描述'
            },
            // 本地路径
            localFile: {},
            localFile2: {},
            localFile3: {},
            // 本地图片
            loadImageNow: '',
            loadImageNow2: '',
            loadImageNow3: '',
            /* 得到token */
            importHeaders: { token: mytoken },
            //  文件上传
            fileUpload: `${process.env.VUE_APP_GOLDWIND_BASE_API}/v2/file/upload`,
            // 离开页面弹出框
            dialogVisible: false,
            // 当前人信息
            userInfo: {},
            // 文件列表
            encLosureList: [],

            // 动态控制服务是否开启
            // radio: 'false',

            // 产品列表
            ProductList: [],

            // 指派人列表
            UserList: [],
            creatUserList: [],

            // 问题类型列表
            marketProjectFirstList: [],

            // 问题类别列表
            marketProjectSecondList: [],

            // 反馈来源列表
            feedBackSourceList: [],

            // 营销项目状态列表
            problemTypeList: [],

            // 阶段列表
            stageList: [],
            childStageList: [],
            isProducr: false,

            // 影响类别列表
            influenceCategory: [],
            // 根据传入的Id得到的单行数据
            draftForm: {},
            productID: '',
            // 项目名称列表
            MarketingProjectName: []
            //     setting: {
            //         branding: false,
            //         menubar: false,
            //         toolbar:
            //   'undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |',
            //         toolbar_drawer: 'sliding',
            //         quickbars_selection_toolbar:
            //   'removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor',
            //         plugins: 'link image  table lists fullscreen',
            //         language: 'zh_CN',
            //         init_instance_callback: editor => {
            //             if (this.content) {
            //                 editor.setContent(this.content)
            //             }
            //             this.finishInit = true
            //             editor.on('NodeChange Change SetContent KeyUp', () => {
            //                 this.hasChanged = true
            //             })
            //         }, // 上传图片
            //         convert_urls: false,
            //         automatic_uploads: true, // 开启点击图片上传时，自动进行远程上传操作
            //         images_upload_base_path: `${process.env.VUE_APP_GOLDWIND_BASE_API}`, // 图片上传的基本路径
            //         images_upload_url: '/v2/file/upload',
            //         images_upload_handler: (blobInfo, success, failure) => {
            //             var xhr, formData

            //             xhr = new XMLHttpRequest()
            //             xhr.withCredentials = false
            //             xhr.open('POST', `${process.env.VUE_APP_GOLDWIND_BASE_API}` + '/v2/file/upload')
            //             xhr.setRequestHeader('token', JSON.parse(sessionStorage.getItem('USERINFO')).token)
            //             // xhr.setRequestHeader('token', JSON.parse(sessionStorage.getItem('USERINFO')).token);

            //             formData = new FormData()
            //             formData.append('file', blobInfo.blob())

            //             formData.append('checkOfficeFmt', false)
            //             formData.append('isTmp', false)
            //             xhr.onload = function(e) {
            //                 var json
            //                 console.log(e, xhr)
            //                 console.log(this)

            //                 if (xhr.errcode == '0') {
            //                     failure('服务器错误:' + xhr.msg)
            //                     return
            //                 }
            //                 json = JSON.parse(this.responseText)
            //                 if (!json.data || typeof json.data.fileSourceId != 'string') {
            //                     failure('服务器错误')
            //                     return
            //                 }
            //                 success(
            //                     `${process.env.VUE_APP_GOLDWIND_BASE_API}` +
            //       '/v2/file/download?' +
            //       '&fileSourceId=' +
            //       json.data.fileSourceId
            //                 )
            //             }
            //             xhr.send(formData)
            //         },
            //         image_advtab: false,
            //         language_url: 'tinymce/langs/zh_CN.js', // 语言包的路径
            //         elementpath: false, // 隐藏元素路径，不明白的可以切换true/false观察页面
            //         statusbar: false,
            //         resize: false,
            //         height: 200
            //     }
        }
    },
    computed: {
        visitedViews() {
            return this.$store.state.tagsView.visitedViews
        }
    },

    created() {
        // 根据传入的数据获得当前行的对象数据
        // this.GetLineObj()
    },
    mounted() {
        /* 数据字典 */
        this.getProductList()
        this.getStageList()
        this.getChildStageList()
        // this.getMarketProjectFirstList('MARKETING_PROJECT_NAME') // 营销项目名称
        // this.getMarketProjectFirstList('MARKETING_PROJECT_BIG') // 营销项目名称
        // this.getMarketProjectFirstList('MARKETING_PROJECT_SMALL')
        // this.getMarketProjectFirstList('SOURCE_FEEDBACK') // 反馈来源列表
        // this.getMarketProjectFirstList('PROBLEM_TYPES') // 问题类型列表
        // this.getMarketProjectFirstList('IMPACT_CATEGORY') // 影响类别按钮

        this.GetLineObj()
        this.UserGetUserInfoAsync() // 当前人信息
    },
    methods: {
        influenceCategoryChange(e) {
            console.log(e)
            this.draftForm.influenceDescribe = null
            this.influenceCategory.forEach(element => {
                if (element.id === e) {
                    this.draftForm.isRequiredTag = element.requiredTag
                    if (!element.requiredTag) {
                        // const form = 'influenceDescribe' + index
                        console.log(this.$refs, 'influenceDescribes', this.$refs['influenceDescribes'])
                        this.$refs['influenceDescribes'].clearValidate()
                    }
                }
            })
        },
        // 通过选择一级问题类型 确认二级问题类型列表
        changeBigCatlog(val) {
            console.log(val)
            console.log(this.marketProjectFirstList)
            let list = []
            this.marketProjectFirstList.forEach(element => {
                if (element.id == val) {
                    list = element.children
                }
            })
            this.draftForm.problemType = ''
            this.marketProjectSecondList = list
        },
        // 获取创建人部门
        // creatorChange(_val) {
        //     for (const item of this.creatUserList) {
        //         if (item.id === this.draftForm.creator) {
        //             this.draftForm.department = item.department
        //         }
        //     }
        // },
        /**
     * @description: 获取当前人员信息
     */
        async UserGetUserInfoAsync() {
            try {
                const result = await FeedBack.UserGetUserInfoAsync()
                if (result.success) {
                    this.userInfo = result.data
                    // console.log('当前人员信息', this.userInfo)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 上传成功回调函数
     * @param {Object} _response 上传成功返回
     * @param {Object} _file 上传文件
     * @param {Array} _fileList 文件列表
     * @param {Number} _index 索引值
     * @return {*}
     */
        onFileSuccess(_response, _file, _fileList) {
            console.log(_response, _file, _fileList)
            if (_response.msg === '成功') {
                this.encLosureList.push({
                    name: _response.data.sourceName,
                    url: _response.data.fileSourceId
                })
                // this.encLosureList = _fileList
                console.log(this.encLosureList)
            } else {
                this.$message.error(_response.msg || '上传失败')
            }
        },

        /**
     * @description: 上传失败
     */
        onFileError() {
            this.$message.error('上传失败')
        },

        /**
     * @description: 移除文件
     * @param {Object} _file 上传文件
     * @param {Array} _fileList 文件列表
     */
        onFileRemove(_file, _fileList) {
            console.log(_file, _fileList)
            this.encLosureList = _fileList
            console.log(this.encLosureList)
        },

        /**
     * @description: 文件导出
     * @param {Object} _file 导出文件
     */
        handlePreview(file) {
            // console.log(file)
            if (file.url) {
                window.location.href = `${process.env.VUE_APP_GOLDWIND_BASE_API}/v2/file/download?fileSourceId=${file.url}`
            }
        },

        /**
     * @description: 获取所有产品信息
     */
        async getProductList() {
            try {
                const result = await FeedBack.getProductListByCurrentUser()
                if (result.success) {
                    this.ProductList = result.data
                    // console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 产品名称选择器 (选择改变指派人)
     * @param {String} _val 根据产品ID获得指派人列表
     */
        async productionChange(_val) {
            // 根据产品ID获得指派人列表
            try {
                const result = await FeedBack.GetListItemAsync({ id: _val })
                this.draftForm.userId = null
                this.UserList = []
                if (result.success) {
                    console.log('MM', result.data)
                    // this.creatUserList = result.data
                    const arr = JSON.parse(JSON.stringify(result.data))
                    let index = ''
                    for (var i = 0; i < arr.length; i++) {
                        const item = arr[i]
                        if (item.id === this.userInfo.id) {
                            index = i
                        }
                    }
                    if (index) {
                        arr.splice(index, 1)
                    }
                    this.UserList = arr
                    // console.log('MM', result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description:营销项目名称选择器(选择改变营销项目状态)
     * @param {String} _val 营销项目名称ID
     */
        async marketProjectChange(_val) {
            // 根据营销项目名称ID获得营销项目状态列表
            // console.log(_val)
            this.draftForm.problemType = null
            this.marketProjectSecondList = []
            try {
                const result = await FeedBack.FormOptionGetListItemAsync({
                    id: _val,
                    type: 'MARKETING_PROJECT_BIG'
                })
                if (result.success) {
                    this.marketProjectSecondList = result.data
                    // console.log('MM', result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 判断是否服务请求
     * @param {Boolean} _val true/false
     */
        isServerRequestChange(_val) {
            // console.log(_val)
            this.isServerOpen = _val
        },

        /**
     * @description: 获取相关下拉列表
     * @param {String} type 传参
     */
        async getMarketProjectFirstList(parentId, influenceCategory) {
            try {
                const result = await FormOptionSet.FormOptionSetGetAllAsync()
                if (result.success) {
                    this.buildTemplateData(result.data, parentId, influenceCategory)
                    // console.log(result.data)
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },
        // 拆分数据
        buildTemplateData(_data, parentId, influenceCategory) {
            console.log('parentId', parentId, influenceCategory)
            this.MarketingProjectName = _data.marketProjectName
            this.problemTypeList = _data.problemTypeSets
            this.influenceCategory = _data.impactCategorySets
            // this.marketProjectSecondList = _data.marketProjectsSmall
            this.feedBackSourceList = _data.sourceFeedbackSets
            this.marketProjectFirstList = _data.marketProjects
            _data.marketProjects.forEach(element => {
                if (element.id == parentId) {
                    this.marketProjectSecondList = element.children
                }
            })
            _data.impactCategorySets.forEach(element => {
                if (element.id == influenceCategory) {
                    this.draftForm.isRequiredTag = element.requiredTag
                }
            })
        },
        // async getMarketProjectFirstList(type) {
        //     if (type == 'MARKETING_PROJECT_BIG') {
        //         try {
        //             const result = await FeedBack.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.marketProjectFirstList = result.data
        //                 console.log('M', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     } else if (type == 'SOURCE_FEEDBACK') {
        //         try {
        //             const result = await FeedBack.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.feedBackSourceList = result.data
        //                 console.log('S', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     } else if (type == 'MARKETING_PROJECT_SMALL') {
        //         try {
        //             const result = await FeedBack.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.marketProjectSecondList = result.data
        //                 console.log('S', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     } else if (type == 'IMPACT_CATEGORY') {
        //         try {
        //             const result = await FeedBack.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.influenceCategory = result.data
        //                 console.log('P', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     } else if (type == 'MARKETING_PROJECT_NAME') {
        //         try {
        //             const result = await FeedBack.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.MarketingProjectName = result.data
        //                 console.log('P', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     } else {
        //         try {
        //             const result = await FeedBack.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.problemTypeList = result.data
        //                 console.log('P', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     }
        // },

        /**
     * @description: 获取所有阶段列表
     */
        async getStageList() {
            try {
                const result = await FeedBack.GetStageListAsync({ type: 'NAME' })
                if (result.success) {
                    this.stageList = result.data
                    // console.log('JJ', result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 获取阶段列表
     */
        async getChildStageList() {
            try {
                const result = await FeedBack.GetListChildrenAsync({ type: 'NAME' })
                if (result.success) {
                    this.childStageList = result.data
                    // console.log('JJ', result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 根据传入的ID操作当前行数据
     */
        async GetLineObj() {
            this.$refs['draftForm'].resetFields()

            // console.log('111')
            // 根据当前行id 获得当前行的数据对象
            // 根据营销项目名称ID获得营销项目状态列表
            try {
                const result = await FeedBack.GetSingleLoadAsync({
                    id: this.$route.query.editId,
                    detailsTag: false
                })
                if (result.success) {
                    console.log('result', result.data.problemTypeParent)
                    this.getMarketProjectFirstList(result.data.problemTypeParent, result.data.influenceCategory)
                    this.draftForm = result.data

                    this.productID = result.data.productId
                    this.productChange(result.data.productId)
                    if (result.data.stage === '1455008058845532161') {
                        this.isProducr = true
                    } else {
                        this.isProducr = false
                    }

                    if (result.data.fileUrl != '' && result.data.fileUrl != null) {
                        const str = '[' + result.data.fileUrl + ']'
                        this.encLosureList = JSON.parse(str)
                    }
                    this.$nextTick(() => {
                        // DOM 更新了
                        console.log('dom update complete')
                        this.$refs['draftForm'].clearValidate()
                    })
                    const quill = this.$refs.quillEditor.quill
                    quill.clipboard.dangerouslyPasteHTML(5, result.data.problemDescribe)
                    const quill1 = this.$refs.quillEditor2.quill
                    quill1.clipboard.dangerouslyPasteHTML(5, result.data.excludeResult)
                    const quill2 = this.$refs.quillEditor3.quill
                    quill2.clipboard.dangerouslyPasteHTML(5, result.data.influenceDescribe)
                }
            } catch (err) {
                console.log(err)
            }
        },
        async productChange(productID) {
            try {
                const result = await FeedBack.GetListItemAsync({ id: productID })
                this.UserList = []
                if (result.success) {
                    this.creatUserList = result.data
                    const arr = JSON.parse(JSON.stringify(result.data))
                    let index = ''
                    for (var i = 0; i < arr.length; i++) {
                        const item = arr[i]
                        if (item.id === this.userInfo.id) {
                            index = i
                        }
                    }
                    if (index) {
                        arr.splice(index, 1)
                    }
                    console.log('人员', result.data)
                    this.UserList = arr
                }
            } catch (err) {
                console.log(err)
            }
        },
        currentViews(tag) {
            let objs = {}
            for (let i = 0; i < this.visitedViews.length; i++) {
                if (this.visitedViews[i].path == tag.path) {
                    objs = this.visitedViews[i]
                }
            }

            return objs
        },

        /**
     * @description: 存草稿方法
     */
        async getMsgFormSon() {
            if (this.draftForm.productId != null && this.draftForm.productId != '') {
                const loading = this.$loading({
                    lock: true,
                    text: '数据传输中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                this.draftForm.draftTag = true
                if (this.encLosureList != [] && this.encLosureList.length > 0) {
                    const strs = JSON.stringify(this.encLosureList)
                    this.draftForm.fileUrl = strs.substring(1, strs.length - 1)
                } else {
                    this.draftForm.fileUrl = null
                }
                try {
                    const result = await FeedBack.DraftUpdateAsync(this.draftForm)
                    if (result.success) {
                        loading.close()
                        // this.$router.push('/Feedback')
                        const selectedTag = this.currentViews(this.$route)
                        this.$store.dispatch('tagsView/delView', selectedTag)
                        this.$router.go(-1)
                    } else {
                        loading.close()
                        this.$message.error('保存失败')
                    }
                } catch (err) {
                    loading.close()
                    console.log(err)
                }
            } else {
                this.$message.error('请选择产品名称')
            }
        },

        /**
     * @description: 发布方法
     * @param {String} formName 用于校验
     */
        getMsgFormSonS(formName) {
            this.draftForm.draftTag = false
            if (this.encLosureList != [] && this.encLosureList.length > 0) {
                const strs = JSON.stringify(this.encLosureList)
                this.draftForm.fileUrl = strs.substring(1, strs.length - 1)
            } else {
                this.draftForm.fileUrl = null
            }
            this.draftForm.stage = '1423154037607493634'
            console.log(this.draftForm)
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.send()
                } else {
                    this.$message.error('请把必填项填写完整')
                }
            })
        },
        // 发布函数
        async send() {
            const loading = this.$loading({
                lock: true,
                text: '数据传输中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            try {
                const result = await FeedBack.DraftUpdateAsync(this.draftForm)
                if (result.success) {
                    loading.close()
                    this.draftForm = {}
                    // console.log('-----------', result.data)
                    // this.$emit('Search')
                    const selectedTag = this.currentViews(this.$route)
                    this.$store.dispatch('tagsView/delView', selectedTag)
                    this.$router.go(-1)
                } else {
                    loading.close()
                    this.$message.error('发布失败')
                }
            } catch (err) {
                loading.close()
                console.log(err)
            }
        },
        changRequest() {
            this.draftForm.serverRequestNumber = null
            this.draftForm.serverRequestTime = null
        },
        // 取消按钮
        sendCancel() {
            // const selectedTag = this.currentViews(this.$route)
            // this.$store.dispatch('tagsView/delView', selectedTag)
            this.$router.go(-1)
        },
        // 返回按钮
        toFeedBack() {
            this.$router.go(-1)
            // this.$store.dispatch('situation/setShowItem', true)
        },
        // 确定按钮
        dialogComfire() {
            // this.$store.dispatch('situation/setShowItem', false)
            const selectedTag = this.currentViews(this.$route)
            this.$store.dispatch('tagsView/delView', selectedTag)
            this.$router.go(-1)
        },

        // 弹出框存草稿按钮
        dialogGetMsgFormSon() {
            this.dialogVisible = false
            this.getMsgFormSon()
        },
        // 存草稿发布按钮
        dialogGetMsgFormSons() {
            this.dialogVisible = false
            this.getMsgFormSonS('draftForm')
        },
        getProblemDescribeContent(Value) {
            this.draftForm.problemDescribe = Value
        },
        getExcludeResultContent(Value) {
            this.draftForm.excludeResult = Value
        },
        getInfluenceDescribeContent(Value) {
            this.draftForm.influenceDescribe = Value
        },
        /**
     * @description: 重现描述文本框 文件上传之前的钩子函数
     * @param {file} file
     */
        quillImgBefore(param) {
            if (!param) {
                this.$message.error('请选择图片')
                return
            }
            const { type: originType } = param
            const typeArray = ['JPG', 'JPEG', 'PNG', 'GIF']
            var type = originType.split('/')[1].toUpperCase()
            if (typeArray.indexOf(type) == -1) {
                this.$message.error('不支持的文件类型')
                return false
            }
            // const IMG_SIZE = 1024 * 200 // 2M
            // if (originSize > IMG_SIZE) {
            //     this.$message.error('上传失败：单个文件不能超过200KB')
            //     return false
            // }
        },
        /**
     * @description: 重现描述文本框 文件上传之前的钩子函数
     * @param {file} file
     */
        quillImgBefore2(param) {
            if (!param) {
                this.$message.error('请选择图片')
                return
            }
            const { type: originType } = param
            const typeArray = ['JPG', 'JPEG', 'PNG', 'GIF']
            var type = originType.split('/')[1].toUpperCase()
            if (typeArray.indexOf(type) == -1) {
                this.$message.error('不支持的文件类型')
                return false
            }
            // const IMG_SIZE = 1024 * 200 // 2M
            // if (originSize > IMG_SIZE) {
            //     this.$message.error('上传失败：单个文件不能超过200KB')
            //     return false
            // }
        },
        /**
     * @description: 重现描述文本框 文件上传之前的钩子函数
     * @param {file} file
     */
        quillImgBefore3(param) {
            if (!param) {
                this.$message.error('请选择图片')
                return
            }
            const { type: originType } = param
            const typeArray = ['JPG', 'JPEG', 'PNG', 'GIF']
            var type = originType.split('/')[1].toUpperCase()
            if (typeArray.indexOf(type) == -1) {
                this.$message.error('不支持的文件类型')
                return false
            }
            // const IMG_SIZE = 1024 * 200 // 2M
            // if (originSize > IMG_SIZE) {
            //     this.$message.error('上传失败：单个文件不能超过200KB')
            //     return false
            // }
        },
        /**
     * @description: 重现描述文本框 文件上传成功的钩子函数
     * @param {Object} res 文件上传成功返回的参数
     * @return {*}
     */
        quillImgSuccess(res) {
            // 如果上传成功
            if (res.errcode == '0') {
                // console.log(res.data.fileSourceId)
                const pickUrl = Api.fileUploadAboutEditor + '?fileSourceId=' + res.data.fileSourceId
                const quill = this.$refs.quillEditor.quill
                const range = quill.getSelection()
                quill.insertEmbed(range.index, 'image', pickUrl)
            } else {
                // this.$message.error('图片插入失败')
                this.$message.error(res.msg || '上传失败111')
            }
        },

        // base64 文件流转图片下载
        downloadFileByBase64(img, refName) {
            console.log('img', img)
            if (img.indexOf('data:') !== -1) {
                console.log(this.dataURLtoBlob(img, 'image.png'))
                var formData
                formData = new FormData()
                formData.append('file', this.dataURLtoBlob(img, '123.png'))
                const imh = this.dataURLtoBlob(img, '123.png')
                console.log(imh)
                formData.append('checkOfficeFmt', false)
                formData.append('isTmp', false)
                axios({
                    method: 'post',
                    url: `${process.env.VUE_APP_GOLDWIND_BASE_API}` + '/v2/zentao/file/upload',
                    data: formData,
                    headers: {
                        token: JSON.parse(sessionStorage.getItem('USERINFO')).token
                    }
                }).then(res => {
                    console.log('res----', res)
                    const quill = this.$refs[refName].quill
                    const length = quill.getSelection(true)
                    // 插入图片 res.info为服务器返回的图片地址
                    quill.insertEmbed(length.index, 'image', res.data.data.imgUrl)
                    // 调整光标到最后
                    quill.setSelection(length.index + 1)
                }).catch(err => {
                    console.log(err)
                })
            } else {
                const quill = this.$refs[refName].quill
                const length = quill.getSelection(true)
                // 插入图片 res.info为服务器返回的图片地址
                quill.insertEmbed(length.index, 'image', img)
                // 调整光标到最后
                quill.setSelection(length.index + 1)
            }
        },
        /**
     * @description: 重现描述文本框 文件上传成功的钩子函数
     * @param {Object} res 文件上传成功返回的参数
     * @return {*}
     */
        quillImgSuccess2(res) {
            // 如果上传成功
            if (res.errcode == '0') {
                // console.log(res.data.fileSourceId)
                const pickUrl = Api.fileUploadAboutEditor + '?fileSourceId=' + res.data.fileSourceId
                const quill = this.$refs.quillEditor2.quill
                const range = quill.getSelection()
                quill.insertEmbed(range.index, 'image', pickUrl)
            } else {
                // this.$message.error('图片插入失败')
                this.$message.error(res.msg || '上传失败111')
            }
        },

        /**
     * @description: 重现描述文本框 文件上传成功的钩子函数
     * @param {Object} res 文件上传成功返回的参数
     * @return {*}
     */
        quillImgSuccess3(res) {
            // 如果上传成功
            if (res.errcode == '0') {
                // console.log(res.data.fileSourceId)
                const pickUrl = Api.fileUploadAboutEditor + '?fileSourceId=' + res.data.fileSourceId
                const quill = this.$refs.quillEditor3.quill
                const range = quill.getSelection()
                quill.insertEmbed(range.index, 'image', pickUrl)
            } else {
                // this.$message.error('图片插入失败')
                this.$message.error(res.msg || '上传失败111')
            }
        },
        handleCustomMatcher(node, Delta) {
            console.log(Delta)
            const ops = []
            Delta.ops.forEach(op => {
                if (op.insert && typeof op.insert === 'string') { // 如果粘贴了图片，这里会是一个对象，所以可以这样处理
                    ops.push({
                        insert: op.insert
                    })
                } else {
                    const img = op.insert.image
                    this.downloadFileByBase64(img, 'quillEditor')
                }
            })
            Delta.ops = ops
            return Delta
        },
        handleCustomMatcher2(node, Delta) {
            const ops = []
            Delta.ops.forEach(op => {
                if (op.insert && typeof op.insert === 'string') { // 如果粘贴了图片，这里会是一个对象，所以可以这样处理
                    ops.push({
                        insert: op.insert
                    })
                } else {
                    const img = op.insert.image
                    this.downloadFileByBase64(img, 'quillEditor2')
                }
            })
            Delta.ops = ops
            return Delta
        },
        handleCustomMatcher3(node, Delta) {
            const ops = []
            Delta.ops.forEach(op => {
                if (op.insert && typeof op.insert === 'string') { // 如果粘贴了图片，这里会是一个对象，所以可以这样处理
                    ops.push({
                        insert: op.insert
                    })
                } else {
                    console.log(op.insert)
                    console.log(op.insert.image)
                    const img = op.insert.image
                    this.downloadFileByBase64(img, 'quillEditor3')
                }
            })
            Delta.ops = ops
            return Delta
        },
        dataURLtoBlob(dataurl, filename) {
            var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]
            var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n)
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            return new File([u8arr], filename, { type: mime })
        },

        /**
     * @description: 重现描述文本框 文件上传图片失败的钩子函数
     */
        // 富文本图片上传失败
        uploadError() {
            // loading动画消失
            this.$message.error('图片插入失败')
        },
        /**
     * @description: 重现描述文本框 文件上传图片失败的钩子函数
     */
        // 富文本图片上传失败
        uploadError2() {
            // loading动画消失
            this.$message.error('图片插入失败')
        },
        /**
     * @description: 重现描述文本框 文件上传图片失败的钩子函数
     */
        // 富文本图片上传失败
        uploadError3() {
            // loading动画消失
            this.$message.error('图片插入失败')
        },

        /**
     * @description: 重现富文本框 文件状态改变的钩子函数
     * @param {file} file
     */
        imgSaveToUrl(file) {
            // 也可以用file
            this.localFile = file.raw // 或者

            // 转换操作可以不放到这个函数里面，
            // 因为这个函数会被多次触发，上传时触发，上传成功也触发
            const reader = new FileReader()
            reader.readAsDataURL(this.localFile) // 这里也可以直接写参数event.raw

            // 转换成功后的操作，reader.result即为转换后的DataURL ，
            // 它不需要自己定义，你可以console.log(reader.result)看一下
            reader.onload = () => {
                this.loadImageNow = reader.result
            }
        },
        /**
     * @description: 重现富文本框 文件状态改变的钩子函数
     * @param {file} file
     */
        imgSaveToUrl2(file) {
            // 也可以用file
            this.localFile2 = file.raw // 或者

            // 转换操作可以不放到这个函数里面，
            // 因为这个函数会被多次触发，上传时触发，上传成功也触发
            const reader = new FileReader()
            reader.readAsDataURL(this.localFile2) // 这里也可以直接写参数event.raw

            // 转换成功后的操作，reader.result即为转换后的DataURL ，
            // 它不需要自己定义，你可以console.log(reader.result)看一下
            reader.onload = () => {
                this.loadImageNow2 = reader.result
            }
        },
        /**
     * @description: 重现富文本框 文件状态改变的钩子函数
     * @param {file} file
     */
        imgSaveToUrl3(file) {
            // 也可以用file
            this.localFile3 = file.raw // 或者

            // 转换操作可以不放到这个函数里面，
            // 因为这个函数会被多次触发，上传时触发，上传成功也触发
            const reader = new FileReader()
            reader.readAsDataURL(this.localFile3) // 这里也可以直接写参数event.raw

            // 转换成功后的操作，reader.result即为转换后的DataURL ，
            // 它不需要自己定义，你可以console.log(reader.result)看一下
            reader.onload = () => {
                this.loadImageNow3 = reader.result
            }
        }
    }
}
</script>

<style scoped lang="less" src="./editFeedBack.less"></style>
<style scoped>
::v-deep .ql-editor li {
    list-style-type: decimal !important;
    list-style-position: inside !important;
}
::v-deep .ql-editor ul > li:before {
    content: "\2022";
}

::v-deep .ql-editor ul > li::marker {
    content: "";
    display: none;
}

::v-deep .ql-editor li:before {
    display: inline-block;
    white-space: nowrap;
    width: 1.2em;
}
::v-deep #lengthLimit > .el-form-item__content .el-form-item__error {
    top: 44px;
    left: 10px;
}
</style>
